<template>
  <view class="base-form bgff">
    <scroll-view :scroll-y="true" :style="{ height: height - 185 + 'rpx' }">
      <view class="pdl30 box-b">
        <uni-forms ref="form" :modelValue="newFormData" :rules="rules">
          <uni-forms-item
            v-for="(item, index) in formArr"
            :key="item.col"
            class="minh90 bdbd9 pdr30 box-b"
            :labelWidth="80"
            :formsItemClass="[
              ['textarea'].includes(item.dataType) || [22, 23].includes(item.editType)
                ? 'flex-start'
                : 'flex-align',
              [22, 23].includes(item.editType) ? 'pd2000 box-b' : '',
              [30].includes(item.editType) ? 'pdt32 pdb20 pdl18 pdr18 box-b disb' : '',
            ]"
            :formsItemLabelClass="[
              [22, 23, 30].includes(item.editType) ? 'flex-start' : 'flex-align',
              [30].includes(item.editType) ? 'flex-start mgb-20' : '',
            ]"
            :name="item.col"
            :label="item.colName"
            :required="!item.nullable"
          >
            <!--input-->
            <uni-easyinput
              v-if="item.editType == 1"
              v-model="newFormData[item.col]"
              :inputBorder="false"
              inputClass="tar"
              textareaClass="tar"
              :type="item.dataType"
              :placeholder="item.placeholder ? item.placeholder : '请输入' + item.colName"
            >
              <template v-slot:left>
                <view v-if="item.showLeft" class="mgr10">
                  {{ item.code }}
                </view>
              </template>
              <template v-slot:right>
                <view v-if="item.showRightIcon" class="mgt20 mgl10">
                  <server-image class="img24" :name="item.rightIcon" resize="_r30xp" />
                </view>
              </template>
            </uni-easyinput>

            <!--单选-->
            <uni-data-checkbox
              v-if="item.editType == 22"
              v-model="newFormData[item.col]"
              :localdata="item.list"
            />

            <!--多选-->
            <uni-data-checkbox
              v-if="item.editType == 23"
              v-model="newFormData[item.col]"
              multiple
              :localdata="item.list"
            />

            <!--日期选择（type=date/daterange/datetime/datetimerange）-->
            <uni-datetime-picker
              v-if="item.editType == 10"
              v-model="newFormData[item.col]"
              :locale="zhCN"
              :border="false"
              inputClass="tar"
              uniDateX="tar flex jsend"
              :showIcons="false"
              :type="item.dataType"
            />

            <!--日期选择darw（type=date/range/time/half）-->
            <!-- <uni-date-darw-picker v-if="item.editType == 11" :type="item.dataType" v-model="newFormData[item.col]"></uni-date-darw-picker> -->

            <!--下拉select-->
            <uni-data-picker
              v-if="item.editType == 20"
              v-model="newFormData[item.col]"
              :border="false"
              areaClass="flex jsend"
              listClass="tar flex jsend mgr16"
              iconsClass="mgl16"
              :type="item.dataType"
              :localdata="item.list"
              :placeholder="item.placeholder ? item.placeholder : '请选择' + item.colName"
            ></uni-data-picker>

            <!--远程搜索选择-->
            <uni-data-select
              v-if="item.editType == 21"
              v-model="newFormData[item.col]"
              :inputBorder="false"
              inputClass="tar"
              iconsClass="mgl16"
              :candidates="item.list"
              :placeholder="item.placeholder ? item.placeholder : '请选择' + item.colName"
              :item="item"
              @select="onSelect"
              @input="searchInput"
              @clear="onClear"
            ></uni-data-select>

            <!--darw（type=linkage/selector）-->
            <!-- <uni-draw-picker
							v-if="item.editType == 24"
							:type="item.dataType"
							:level="item.level"
							v-model="newFormData[item.col]"
							:options="item.list"
							:defaultProps="item.defaultProps"
							:placeholder="item.placeholder ? item.placeholder : '请选择' + item.colName"
						></uni-draw-picker> -->

            <!--switch-->
            <switch
              v-if="item.editType == 25"
              style="transform: scale(0.7)"
              :color="item.color || '#0095FF'"
              :checked="newFormData[item.col]"
              @change="switchChange($event, item)"
            />

            <!--文件上传-->
            <uni-file-picker
              v-if="item.editType == 30"
              v-model="newFormData[item.col]"
              :imageStyles="{
                width: '100px',
                height: '100px',
              }"
              mode="grid"
              @select="select($event, item)"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </scroll-view>

    <!-- 状态组件 -->
    <work-orders-detail-status
      :order="orderDetail"
      :btnName="btnName"
      :showDisable="showDisable"
      :leftName="leftName"
      :btnBetween="btnBetween"
      @submit="submit"
      @submitLeft="reset"
    ></work-orders-detail-status>
  </view>
</template>
<script>
// 状态组件
import workOrdersDetailStatus from '@/pages/work-order/components/work-orders-detail-status.vue';

// import UniDataSelect from '@/components/baseForm/uni-data-select/uni-data-select.vue';

// import UniDateDrawPicker from '../uni-date-darw-picker/uni-date-darw-picker.vue';
// import UniDrawPicker from '../uni-darw-picker/uni-draw-picker.vue';

export default {
  components: {
    // 状态组件
    workOrdersDetailStatus,

    // UniDataSelect,

    // UniDateDrawPicker,
    // UniDrawPicker
  },
  props: {
    formArr: {
      default: () => {
        return [];
      },
    },
    formData: {
      default: () => {
        return {};
      },
    },
    height: {
      type: [Number, String],
      default: '',
    },
    rules: {
      default: () => {
        return {};
      },
    },
    // submitTitle: {
    // 	default: () => {
    // 		return '确定';
    // 	}
    // },
    cancelTitle: {
      default: () => {
        return '重置';
      },
    },
    // 状态组件 start
    // between-box布局
    btnBetween: {
      type: Boolean,
      default: false,
    },
    leftName: {
      type: String,
      default: '',
    },
    // 是否可点击
    showDisable: {
      type: Boolean,
      default: false,
    },
    btnName: {
      type: String,
      default: '确定',
    },
    orderDetail: {
      default: () => {
        return {};
      },
    },
    // 状态组件 end
  },
  data() {
    return {
      newFormData: {},
      // 日期默认中文
      zhCN: {
        cancel: '取消',
        confirm: '确认',
        title: '选择日期',
      },
    };
  },
  emits: ['input', 'select', 'submit', 'uploadSelect'],

  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.form.setRules(this.rules);
  },

  computed: {},
  watch: {
    formData: {
      handler(newValue, oldValue) {
        this.newFormData = newValue;
      },
      deep: true,
    },
  },
  mounted() {
    this.newFormData = this.formData;
  },
  methods: {
    switchChange(e, item) {
      this.$set(this.newFormData, item.col, e.detail.value);
    },
    onSelect(value, data, item) {
      this.$set(this.newFormData, item.col, value);
    },
    searchInput(value) {
      this.$emit('searchInput', value);
    },
    onClear(item) {
      this.$set(this.newFormData, item.col, '');
    },
    // 获取上传状态
    select(e, item) {
      this.$emit('uploadSelect', e, item);
    },
    submit() {
      this.$emit('submit', this.$refs.form);
    },
    reset() {
      //初始化数据
      this.formArr.forEach((item) => {
        this.$set(this.newFormData, item.col, item.defaultValue);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-box {
  display: flex;
  height: 160rpx;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background: #ffffff;
  z-index: 9;
  width: 100%;
  > view {
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    border: solid 2rpx #ec652b;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 30rpx;
  }
  .reset {
    color: #ec652b;
    border-radius: 20px 0px 0px 20px;
    margin-left: 30rpx;
  }
  .submit {
    color: #fff;
    background-color: #ec652b;
    border-radius: 0px 20px 20px 0px;
    margin-right: 30rpx;
  }
}
</style>
